<template>
  <view class="wrapper">
    <view class="search-box">
      <input class="search-input" v-model="inputContent" placeholder="账号" placeholder-style="color: #878787; text-align: center;" @confirm="getUserList" />
      <view class="iconfont icon-shanchu1 delete-icon" v-if="inputContent" @click="handleDelete"></view>
    </view>
    <view class="search-content" v-if="showResult">
      <view v-if="userList.length">
        <view class="user-card" v-for="item in userList" :key="item._id" @click="handleToPage(item.username)">
          <image src="@/static/image/default-avatar.png" class="avatar"></image>
          <view class="user-info">
            <view class="nickname">{{item.username}}</view>
            <view class="user-id">账号：{{item.prettyNumber}}</view>
          </view>
          <view class="iconfont icon-jiantou-you arrow-icon"></view>
        </view>
      </view>
      <view class="no-user" v-else>
        <view class="iconfont icon-guanliyuan-yonghuchaxun no-user-icon"></view>
        <view class="tips">该用户不存在</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { queryUserList } from '@/services/user'
export default {
  name: 'SearchFriends',
  computed: {
    ...mapState(['userInfo']),
  },
  data() {
    return {
      inputContent: '',
      userList: [],
      showResult: false
    }
  },
  methods: {
    handleToPage (username) {
      uni.navigateTo({
        url: `/pages/friends/FriendsDetail?username=${username}`
      })
    },
    handleDelete () {
      this.inputContent = ''
    },
    async getUserList () {
      if (this.userInfo.username == this.inputContent) {
        return uni.toast({title: '不能添加自己到通讯录', icon: 'none'})
      }
      const res = await queryUserList({
        name: this.inputContent
      })
      if (res.code !== 200) return
      this.showResult = true
      this.userList = res.data
    }
  },
}
</script>

<style lang="scss" scoped>
.wrapper {
  box-sizing: border-box;
  padding: 30upx;
  .search-box {
    width: 100%;
    height: 76upx;
    background: #F1F1F1;
    border-radius: 38upx;
    display: flex;
    align-items: center;
    .search-input {
      width: 100%;
      height: 76upx;
      box-sizing: border-box;
      padding: 0 24upx 0 40upx;
      line-height: 76upx;
      font-size: 26upx;
      font-weight: 400;
      color: #000000;
    }
    .delete-icon {
      color: #878787;
      font-size: 30upx;
      margin-right: 24upx;
    }
  }
  .search-content {
    .user-card {
      margin-top: 30upx;
      width: 100%;
      background: #FFFFFF;
      border: 2upx solid #E1E1E1;
      border-radius: 20upx;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 30upx 40upx;
      .avatar {
        flex-shrink: 0;
        width: 100upx;
        height: 100upx;
        border-radius: 50%;
      }
      .user-info {
        margin-left: 30upx;
        flex: 1;
        .nickname {
          font-size: 32upx;
          font-weight: 500;
          color: #000000;
          line-height: 1em;
        }
        .user-id {
          margin-top: 20upx;
          font-size: 26upx;
          font-weight: 400;
          color: #878787;
          line-height: 1em;
        }
      }
      .arrow-icon {
        color: #A6A6A6;
      }
    }
    .no-user {
      padding-top: 148upx;
      text-align: center;
      .no-user-icon {
        color: #DED9D9;
        font-size: 80upx;
      }
      .tips {
        margin-top: 40upx;
        font-size: 30upx;
        font-weight: 400;
        color: #878787;
      }
    }
  }
}
</style>